<template>
    <div class="user">
        <div class="user-header" :class="{'ispc':mobile==2}">
            {{ $t('new.desc1') }}
<!--            <img src="../../assets/images/blcimg/message.png" alt="" class="home-message" @click="handerPath('/message')" />-->
        </div>
        <div class="line"></div>
        <div class="user-info">
            <div class="user-avatar" @click="handerPath('/member/myinfo')">
                <img :src="info.avatar" v-if="info.avatar != ''" alt="" />
            </div>
            <div class="info">
                <div class="name">{{ info.nickname }}</div>
                <div class="uid">ID:{{ info.inviteCode }} <img src="../../assets/images/new/my-copy.png" alt=""
                        v-clipboard:copy="info.inviteCode" v-clipboard:success="onCopy" /></div>
<!--                <div class="credits">{{ $t('new.desc5') }}<p></p>{{ info.credits }}</div>-->
            </div>
        </div>

        <div class="user-balance" @click="$router.push('/user/wallet')">
            <p>{{ this.$t('new.doc37') }}</p>
            <p>${{ info2.totalUSDTAmount }}</p>
        </div>

      <ul class="wallet-info">
        <!-- <li @click="$router.push('/user/wallet')">
          <div class="s">{{ info2.totalUSDTAmount }}</div>
          <div class="n">{{ $t('new.doc13') }}</div>
        </li> -->
        <li>
          <div class="s">{{ info2.totalUSDTAmount }}</div>
          <div class="n">{{ this.$t('new.doc38') }}</div>
        </li>
        <li>
          <div class="s">{{ info.credits }}</div>
          <div class="n">{{ this.$t('new.doc39') }}</div>
        </li>
      </ul>
<!--        <div class="user-tabbar">-->
<!--            <div class="tabbar-item" v-for="item in tabbar" :key="item.id" @click="handerPath(item.path)">-->
<!--                <img :src="item.img" alt="" />-->
<!--                <p>{{ item.name }}</p>-->
<!--            </div>-->
<!--        </div>-->
        <div class="user-list">
            <div class="list-item" v-for="item in subtab" :key="item.id" @click="handerPath(item.path)">
                <img :src="item.img" alt="" class="img" />
                <div>{{ item.name }}</div>
                <img src="../../assets/images/blcimg/lefticon.png" alt="" class="icon" />
            </div>
        </div>
        <div class="user-logot flexcenter" @click="logout">{{ $t('new.desc9') }}</div>
        <bottom_nav :activeTitle="activeTitle"></bottom_nav>
        <!-- 下载提示 -->
<!--        <van-popup v-model="showLoad" round :close-on-click-overlay="false" closeable @close="handlerCloseTips">-->
<!--            <div class="upload-info">-->
<!--                <div class="upload-title">{{$t('new.desc129')}}</div>-->
<!--                <div class="upload-btn flexcenter" @click="handlerUpload">{{$t('new.desc130')}}</div>-->
<!--            </div>-->
<!--        </van-popup>-->
    </div>
</template>

<script>
import router from '../../router';

export default {
    data() {
        return {
            showLoad:false,
            mobile:localStorage.getItem('ismobile'),
            activeTitle: this.$t('new.desc1'),
            info: {},
            info2:[],
            tabbar: [
                {
                    img: require('../../assets/images/blcimg/setting_my_level.png'),
                    name: this.$t('my_grade.title'),
                    path: '/member/my_grade?type=1'
                },
                {
                    img: require('../../assets/images/blcimg/setting_tibi.png'),
                    name: this.$t('new.desc6'),
                    path: '/user/withdrawal'
                },

                // {
                //     img: require('../../assets/images/blcimg/setting_safe_set.png'),
                //     name: this.$t('new.desc7'),
                //     path: '/user/settrade'
                // },
                {
                    img:require('../../assets/images/blcimg/setting_verified.png'),
                    name: this.$t('new.desc8'),
                    path: '/user/updatepass'
                }
            ],
            subtab: [
            //   {
            //     img: require('../../assets/images/blcimg/setting_my_level.png'),
            //     name: this.$t('my_grade.title'),
            //     path: '/member/my_grade?type=1'
            //   },
              {
                img: require('../../assets/images/new/my-wallet.png'),
                name: this.$t('new.desc6'),
                path: '/user/withdrawal'
              },

              // {
              //     img: require('../../assets/images/blcimg/setting_safe_set.png'),
              //     name: this.$t('new.desc7'),
              //     path: '/user/settrade'
              // },
              {
                img:require('../../assets/images/new/my-editPassword.png'),
                name: this.$t('new.desc8'),
                path: '/user/updatepass'
              },
            //   {
            //     img:require('../../assets/images/new/my-balanceDetail.png'),
            //     name: '资金明细',
            //     path: '/user/updatepass'
            //   },

                // {
                //     img: require('../../assets/images/upload.png'),
                //     name: this.$t('bargain.loadapp'),
                //     path: '/doc/downApp'
                // },
                // {
                //     img: require('../../assets/images/invite.png'),
                //     name: this.$t('new.desc128'),
                //     path: '/user/invite'
                // },
                {
                    img: require('../../assets/images/new/my-lang.png'),
                    name: this.$t('word.switch_lang'),
                    path: '/member/set_lang'
                },
                {
                    img: require('../../assets/images/new/my-kf.png'),
                    name: this.$t('title.kefu'),
                    path: '/kefu'
                },
                // {
                //     img: require('../../assets/images/set/ico_feedback.png'),
                //     name: this.$t('title.feedback'),
                //     path: '/member/feedback'
                // },
                {
                    img: require('../../assets/images/new/my-about.png'),
                    name: this.$t('set.about'),
                    path: '/member/about?type=1'
                },

            ]
        }
    },
    mounted() {
        if(localStorage.getItem('istips') != 1){
            this.showLoad=true;
        }
        this.$post(this.URL.member.personal, {}).then(res => {
            if (res.code == 0) {
                this.info = res.data
            } else {
                this.$toast(res.message)
            }
        })
      this.$post(this.URL.withdrawal.wallet, {}).then(res => {
        if (res.code == 0) {
          this.info2 = res.data
        } else {
          this.$toast(res.message);
        }
      })
    },
    methods: {
        handlerUpload() {
            localStorage.setItem('istips',1)
            this.$router.push('/doc/downApp')
        },
        handlerCloseTips() {
            localStorage.setItem('istips',1)
        },
        onCopy() {
            this.$toast(this.$t('toast.copy_success'));
        },
        handerPath(item) {
            // if(item == '/user/withdrawal' && !this.info.hasSetPassword){
            //     this.$toast(this.$t('new.desc28'))
            //     return;
            // }
            this.$router.push(item)
        },
        logout() {
            this.$post(this.URL.user.logout, {}).then(res => {
                if (res.code == 0) {
                    localStorage.removeItem('token')
                    localStorage.removeItem('istips');
                    this.$router.replace("/login");
                    this.$toast.success(this.$t('set.logout_done'));
                } else {
                    this.$toast(res.message);
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.user {
    min-height: 100vh;
    padding-bottom: 1.5rem;
    .user-header {
        position: relative;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        z-index: 9;
        font-size: .32rem;
        text-align: center;
        line-height: .88rem;
        background-color: #FFFFFF;
        color: #333333;
        .home-message {
            position: absolute;
            top: .2rem;
            right: 0.24rem;
            width: .48rem;
            height: .48rem;
        }
    }
    .line{
        width: 100%;
        height: 1px;
    }
    .user-info {
        margin: 1.2rem .5rem .2rem;
        padding: .3rem .5rem;
        display: flex;
        color: #4A4C52;
        background: #FFFFFF;
        border-radius: 0.16rem;
        .user-avatar {
            flex: 0 0 1.2rem;
            height: 1.2rem;
            margin-right: 0.2rem;
            border-radius: 50%;
            background: url('../../assets/images/ico_photo.png') center no-repeat;
            background-size: 100% 100%;
            img{
                width:1.2rem;
                height: 1.2rem;
                border-radius: 50%;
                object-fit: cover;
            }
        }

        .info {
            flex: 1;

            .name {
                padding: .1rem 0 .12rem;
                font-size: .36rem;
            }

            .uid {
                width: 100%;
                font-size: .26rem;
                display: flex;
                color: #A4A9B3;
                img {
                    width: .22rem;
                    height: .22rem;
                    margin: 0.06rem 0 0 .12rem;
                }
            }

            .credits {
                width: 100%;
                margin-top: .1rem;
                display: flex;
                font-size: .26rem;
                color: #222222;

                p {
                    width: 3rem;
                    height: .26rem;
                    margin: 0.08rem .1rem 0;
                    background: #0066EC;
                }
            }
        }
    }

    .user-balance{
        display: flex;
        justify-content: space-between;
        margin: .2rem .5rem .2rem;
        padding: .3rem .5rem;
        color: #4A4C52;
        font-size: 16px;
        background: #FFFFFF;
        border-radius: 0.16rem;
    }

    .user-tabbar {
        padding: .39rem 0;
        display: flex;
        border-bottom: .2rem solid #F7F7FA;

        .tabbar-item {
            flex: 0 0 33.3%;
            text-align: center;
            font-size: .26rem;
            color: #222222;

            img {
                width: .6rem;
                height: .6rem;
                margin-bottom: .18rem;
            }
        }
    }

    .user-list {
      color: #666666;
      background: #FFFFFF;
      margin-top: .2rem;

        .list-item {
            padding: .32rem 0;
            font-size: .28rem;
            display: flex;
            line-height: .46rem;
            border-bottom: .02rem solid #D8D8D8;

            // &:last-child {
            //     border-bottom: 0;
            // }

            .img {
                width: .46rem;
                height: .46rem;
                margin-right: .2rem;
                margin-left: .5rem;
            }

            div {
                flex: 1;
                color: #666666;
            }

            .icon {
                width: .13rem;
                height: .23rem;
                margin-top: .12rem;
                margin-right: 0.5rem;
            }
        }
    }

    .user-logot {
        margin: .6rem .3rem 0 .3rem;
        height: 0.88rem;
        color: #666666;
        background: #FFFFFF;
        font-size: .32rem;
        border-radius: 0.16rem;
    }
    .upload-info{
        width: 5.8rem;
        padding: .45rem 0;
        text-align: center;
        font-size: .28rem;
        color: #15181F;
        .upload-title{
            padding: .48rem 0 0;
        }
        .upload-btn{
            width: 4.4rem;
            height: 0.76rem;
            margin: .46rem auto 0;
            background: #2a64e4;
            border-radius: 0.16rem;
            color: #FFFFFF;
        }
    }
}

.wallet-info {
  padding: 0.32rem 0.3rem;
  background: #FFFFFF;
  border-radius: 0.16rem;
  color: #98969E;
  margin: 0 .5rem;
  margin-top: .1rem;
  display: flex;
  li {
    flex:1;
    text-align: center;position: relative;
    .s {
      font-weight: bold;
      color: #333333;
      font-size: .36rem;
    }
    &:last-child:after {
      height: .6rem;
      width: .02rem;
      background: #E7E7E7;
      display: block;
      content:'';
      position: absolute;left:0;top:50%;
      margin-top: -.3rem;
    }
  }
}
</style>
